<template>
  <div class="container hot-page">
    <img class="hot-bg" src="~/assets/img/hot-bg.png" alt="" />
    <div class="hot-page-content">
      <CommonTitle line-color="#24C7A7">
        <template #title>
          <div class="ml-10">商城热榜</div>
        </template>
      </CommonTitle>
      <div class="desc-title mt-10">全域横向比较，捕捉市场需求</div>
      <div class="shop">
        <div class="shop-item" v-for="i in 6">
          <div class="shop-item-header">
            <img class="t_icon" src="~/assets/img/xhs.png" alt="" srcset="" />
            <span class="t_name ml-10">淘宝热搜榜单</span>
            <span class="t_desc ml-10">TOP20热点，每小时更新</span>
            <img
              class="t_btn"
              src="~/assets/img/fenxiang.png"
              alt=""
              srcset=""
            />
          </div>
          <div class="shop-item-list">
            <div class="shop-item-list-row">
              <div class="shop-item-list-col-1 jinpai">
                <img src="~/assets/img/jinpai.png" alt="" srcset="" />
              </div>
              <div class="shop-item-list-col-2 ml-10">
                <div class="name">正月游玩-元宵喜乐</div>
                <div class="desc mt-10">
                  <span>爆品元宵</span>
                  <span class="o-color">9.9元抢</span>
                </div>
              </div>
              <div class="shop-item-list-col-3">
                <template v-if="i === 1 || i === 3 || i === 4 || i === 5">
                  <div class="huo-box">
                    <img src="~/assets/img/huo.png" alt="" />
                    <div class="rd mt-10">741w</div>
                  </div>
                </template>
                <template v-if="i === 2">
                  <div class="qr-box"></div>
                </template>
                <template v-if="i === 6">
                  <div class="s-jt o-color">上</div>
                </template>
              </div>
            </div>
            <div class="shop-item-list-row">
              <div class="shop-item-list-col-1 tongpai">
                <img src="~/assets/img/yinpai.png" alt="" srcset="" />
              </div>
              <div class="shop-item-list-col-2 ml-10">
                <div class="name">正月游玩-元宵喜乐</div>
                <div class="desc mt-10">
                  <span>爆品元宵</span>
                  <span class="o-color">9.9元抢</span>
                  <span class="ml-10"
                    ><span>宝贝</span
                    ><span><span class="g-color">1556</span>件</span></span
                  >
                </div>
              </div>
              <div class="shop-item-list-col-3">
                <template v-if="i === 1 || i === 3 || i === 4 || i === 5">
                  <div class="huo-box">
                    <img src="~/assets/img/huo.png" alt="" />
                    <div class="rd mt-10">741w</div>
                  </div>
                </template>
                <template v-if="i === 2">
                  <div class="qr-box"></div>
                </template>
                <template v-if="i === 6">
                  <div class="s-jt o-color">上</div>
                </template>
              </div>
            </div>
            <div class="shop-item-list-row">
              <div class="shop-item-list-col-1 yinpai">
                <img src="~/assets/img/tongpai.png" alt="" srcset="" />
              </div>
              <div class="shop-item-list-col-2 ml-10">
                <div class="name">正月游玩-元宵喜乐</div>
                <div class="desc mt-10">
                  <span>爆品元宵</span>
                  <span class="o-color">9.9元抢</span>
                  <span class="ml-10"
                    ><span>宝贝</span
                    ><span><span class="g-color">1556</span>件</span></span
                  >
                </div>
              </div>
              <div class="shop-item-list-col-3">
                <template v-if="i === 1 || i === 3 || i === 4 || i === 5">
                  <div class="huo-box">
                    <img src="~/assets/img/huo.png" alt="" />
                    <div class="rd">741w</div>
                  </div>
                </template>
                <template v-if="i === 2">
                  <div class="qr-box"></div>
                </template>
                <template v-if="i === 6">
                  <div class="s-jt o-color">上</div>
                </template>
              </div>
            </div>
            <div class="shop-item-list-row">
              <div class="shop-item-list-col-1 putong">
                <img src="~/assets/img/p-4.png" alt="" srcset="" />
              </div>
              <div class="shop-item-list-col-2 ml-10">
                <div class="name">正月游玩-元宵喜乐</div>
                <div class="desc mt-10">
                  <span>爆品元宵</span>
                  <span class="o-color">9.9元抢</span>
                  <span class="ml-10"
                    ><span>宝贝</span
                    ><span><span class="g-color">1556</span>件</span></span
                  >
                </div>
              </div>
              <div class="shop-item-list-col-3">
                <template v-if="i === 1 || i === 3 || i === 4 || i === 5">
                  <div class="huo-box">
                    <img src="~/assets/img/huo.png" alt="" />
                    <div class="rd">741w</div>
                  </div>
                </template>
                <template v-if="i === 2">
                  <div class="qr-box"></div>
                </template>
                <template v-if="i === 6">
                  <div class="s-jt o-color">上</div>
                </template>
              </div>
            </div>
            <div class="shop-item-list-row">
              <div class="shop-item-list-col-1 putong">
                <img src="~/assets/img/p-5.png" alt="" srcset="" />
              </div>
              <div class="shop-item-list-col-2 ml-10">
                <div class="name">正月游玩-元宵喜乐</div>
                <div class="desc mt-10">
                  <span>爆品元宵</span>
                  <span class="o-color">9.9元抢</span>
                  <span class="ml-10"
                    ><span>宝贝</span
                    ><span><span class="g-color">1556</span>件</span></span
                  >
                </div>
              </div>
              <div class="shop-item-list-col-3">
                <template v-if="i === 1 || i === 3 || i === 4 || i === 5">
                  <div class="huo-box">
                    <img src="~/assets/img/huo.png" alt="" />
                    <div class="rd">741w</div>
                  </div>
                </template>
                <template v-if="i === 2">
                  <div class="qr-box"></div>
                </template>
                <template v-if="i === 6">
                  <div class="s-jt o-color">上</div>
                </template>
              </div>
            </div>
            <div class="shop-item-list-row">
              <div class="shop-item-list-col-1 putong">
                <img src="~/assets/img/p-6.png" alt="" srcset="" />
              </div>
              <div class="shop-item-list-col-2 ml-10">
                <div class="name">正月游玩-元宵喜乐</div>
                <div class="desc mt-10">
                  <span>爆品元宵</span>
                  <span class="o-color">9.9元抢</span>
                  <span class="ml-10"
                    ><span>宝贝</span
                    ><span><span class="g-color">1556</span>件</span></span
                  >
                </div>
              </div>
              <div class="shop-item-list-col-3">
                <template v-if="i === 1 || i === 3 || i === 4 || i === 5">
                  <div class="huo-box">
                    <img src="~/assets/img/huo.png" alt="" />
                    <div class="rd">741w</div>
                  </div>
                </template>
                <template v-if="i === 2">
                  <div class="qr-box"></div>
                </template>
                <template v-if="i === 6">
                  <div class="s-jt g-color">下</div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height: 40px"></div>
      <CommonTitle line-color="#24C7A7">
        <template #title>
          <div class="ml-10">内容热榜</div>
        </template>
      </CommonTitle>
      <div class="desc-title mt-10">紧跟热点趋势，把握流量风口</div>
      <div class="content-list">
        <div class="content-list-item" v-for="i in 6">
          <div class="content-list-item-header">
            <img class="t_icon" src="~/assets/img/xhs.png" alt="" srcset="" />
            <span class="t_name ml-10">小红书·热点</span>
          </div>
          <div class="content-list-item-list">
            <div class="content-list-item-list-h">
              <div class="col1">排名</div>
              <div class="col2">热点事件</div>
              <div class="col3">热度值</div>
              <div class="col4">热度趋势</div>
            </div>
            <div class="content-list-item-list-body">
              <div class="content-list-item-list-row">
                <div class="col1">
                  <img src="~/assets/img/jinpai.png" alt="" />
                </div>
                <div class="col2">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="刘耀文放在高中我高低得暗恋3年"
                    placement="top-start"
                  >
                    刘耀文放在高中我高低得暗恋3年
                  </el-tooltip>
                </div>
                <div class="col3">1101.0w</div>
                <div class="col4">线</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
@import "./hot.scss";
</style>
